<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票列表</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<vote>
		<div id="vote" class="wrap">
			<h2>投票列表</h2>
			<ul class="list">
				<li v-for="(v,i) in votes.records" :class="i%2==0?'odd':''" >
					<h4>
						<a :href="'view.html?id='+v.id">{{v.vname}}</a>
					</h4>
					<div class="join"><a :href="'vote.html?id='+v.id">我要参与</a></div>
					<p class="info">共有 ??? 个选项，已有 ??? 个网友参与了投票。</p>
				</li>
			</ul>
			<el-pagination
					@current-change="changePage"
					background
					layout="prev, pager, next"
					:total="votes.total"
					:page-size="votes.size">
			</el-pagination>
		</div>
	</vote>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			votes: {records:[], total:0, current: 1, size: 1},
		},
		methods: {
			query(){
				let url = `/vote/list?size=${this.votes.size}&page=${this.votes.current}`
				axios.get(url).then(res=>this.votes = res.data);
			},
			changePage(page){
				this.votes.current = page;
				this.query();
			}
		},
		created(){
			this.query();
		}
	});
</script>

</body>
</html>
